<template>
    <a-card :bordered="false">
        <a-button shape="round" size="small" type="primary"  @click="handleReset">清空滑板</a-button>
        <a-button shape="round" size="small" type="primary"  @click="handleGenerate">生成图片</a-button>
        <vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" 
            :lineColor="lineColor" :bgColor.sync="bgColor" :isClearBgColor="false" style="border-style:solid;border-width:1px;"/>
    </a-card>
</template>

<script>

import {SysMixin} from '@/mixins/SysMixin'
import defaultSettings from '@/config/defaultSettings'
import vueEsign from 'vue-esign'

export default {
    name:'esign',
    components:{vueEsign},
    mixins:[SysMixin],
    data(){
        return{
            defaultSettings,
            lineWidth: 6,
            lineColor: '#000000',
            bgColor: '',
            resultImg: '',
            isCrop: false
            
            
        }
    },
    methods:{
        handleReset () {
            this.$refs.esign.reset()
        },
        handleGenerate () {
            this.$refs.esign.generate().then(res => {
                this.resultImg = res
                console.log(this.resultImg)
            }).catch(err => {
                alert(err) // 画布没有签字时会执行这里 'Not Signned'
            })
        }
    }
    
}
</script>